<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../dist/theme/gray.css"/>
	<link rel="stylesheet" type="text/css" href="css/main.css"/>
	<title>jquery-tab demo - controller</title>
</head>
<body>
<p>
	Current index: <span id="current-index">0</span>
</p>
<div class="region" data-fixed-height="true">
	<h1 data-tab-item-name="item-0">label 0</h1>
	<div>panel 0</div>

	<h1 data-tab-item-name="item-1">label 1</h1>
	<div>panel 1</div>

	<h1 data-tab-item-name="item-2">label 2</h1>
	<div>panel 2</div>

	<h1 data-tab-item-name="item-3">label 3</h1>
	<div>panel 3</div>

	<h1 data-tab-item-name="item-4">label 4</h1>
	<div>panel 4</div>

	<h1 data-tab-item-name="item-5">label 5</h1>
	<div>panel 5</div>

	<h1 data-tab-item-name="item-6">label 6</h1>
	<div>panel 6</div>

	<h1 data-tab-item-name="item-7">label 7</h1>
	<div>panel 7</div>

	<h1 data-tab-item-name="item-8">label 8</h1>
	<div>panel 8</div>

	<h1 data-tab-item-name="item-9">label 9</h1>
	<div>panel 9</div>

	<h1 data-tab-item-name="item-10">label 10</h1>
	<div>panel 10</div>
</div>


<div class="tab-region" data-mode="vertical" data-status-hash-template="tab=">
	<h1>Switching</h1>
	<p>
		Switch to(name/index):
		<input type="text" id="txt-switch-to"/>
		<button id="btn-switch-to">Go</button>
	</p>
	<p>
		<button id="btn-switch-first">|&lt;&lt; Switch First</button>
		<button id="btn-switch-prev">&lt; Switch Previous</button>
		<button id="btn-switch-next">Switch Next &gt;</button>
		<button id="btn-switch-last">Switch Last &gt;&gt;|</button>
	</p>
	<p>
		<label><input type="checkbox" id="chk-include-disabled"/>include disabled</label>
		<label><input type="checkbox" id="chk-include-hidden"/>include hidden</label>
		<label><input type="checkbox" id="chk-loop"/>loop</label>
	</p>

	<h1>Enable/Disable</h1>
	<p>
		Item(name/index):
		<input type="text" id="txt-enable-disable"/>
		<button id="btn-enable">Enable</button>
		<button id="btn-disable">Disable</button>
	</p>

	<h1>Visible/Hidden</h1>
	<p>
		Item(name/index):
		<input type="text" id="txt-visible-hidden"/>
		<button id="btn-visible">Visible</button>
		<button id="btn-hidden">Hidden</button>
	</p>

	<h1>Remove</h1>
	<p>
		Item(name/index):
		<input type="text" id="txt-remove"/>
		<button id="btn-remove">Remove</button>
	</p>

	<h1>Add/Insert Tab Item</h1>
	<p>
		Title: <input type="text" id="txt-add-tab-item-title"/><br/>
		Content: <textarea id="txt-add-tab-item-content"></textarea><br/>
		name: <input type="text" id="txt-add-tab-item-name"/><br/>
		disabled: <input type="checkbox" id="chk-add-tab-item-disabled"/><br/>
		hidden: <input type="checkbox" id="chk-add-tab-item-hidden"/><br/>
		<button id="btn-add-tab-item">Add tab item</button>
	</p>
	<p>
		Before Item(name/index):
		<input type="text" id="txt-insert-tab-item-pos"/>
		<button id="btn-insert-tab-item">Insert tab item</button>
	</p>

	<h1>Add/Insert</h1>
	<p>
		<textarea id="txt-add">
		&lt;div&gt;
			&lt;h1&gt;added title 1&lt;/h1&gt;
			&lt;p&gt;added content 1.1&lt;/p&gt;
			&lt;p&gt;added content 1.2&lt;/p&gt;

			&lt;h1&gt;added title 2&lt;/h1&gt;
			&lt;p&gt;added content 2.1&lt;/p&gt;
			&lt;p&gt;added content 2.2&lt;/p&gt;
		&lt;/div&gt;
		</textarea><br/>
		<button id="btn-add">Add</button>
	</p>
	<p>
		Before Item(name/index):
		<input type="text" id="txt-insert-pos"/>
		<button id="btn-insert">Insert</button>
	</p>

	<h1>Move</h1>
	<p>
		Exchange tab item(from,to):
		<input type="text" id="txt-exchange-from-pos"/>
		<input type="text" id="txt-exchange-to-pos"/>
		<button id="btn-exchange">Go</button>
	</p>
	<p>
		Move tab item(from,to):
		<input type="text" id="txt-move-tab-item-from-pos"/>
		<input type="text" id="txt-move-tab-item-to-pos"/>
		<button id="btn-move-tab-item-before">Move to before</button>
		<button id="btn-move-tab-item-after">Move to after</button>
	</p>
	<p>
		Move tab item(from):
		<input type="text" id="txt-move-tab-item-pos"/>
		<button id="btn-move-tab-item-first">|&lt;&lt; Move First</button>
		<button id="btn-move-tab-item-prev">&lt; Move Previous</button>
		<button id="btn-move-tab-item-next">Move Next &gt;</button>
		<button id="btn-move-tab-item-last">Move Last &gt;&gt;|</button>
	</p>
</div>

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="../dist/jquery-tab.js"></script>
<script type="text/javascript">
	var controller = $('.region').tab({
		onAfterSwitch: function (from, to, state) {
			state === 1 && updateCurrentIndex();
		}
	}).data('tab-controller');

	var $currentIndex = $('#current-index');
	var updateCurrentIndex = function () {
		$currentIndex.text(controller.getCurrentIndex());
	};

	$('#btn-switch-to').click(function () {
		var target = $('#txt-switch-to').val();
		controller.switchTo(target);
	});

	$('#btn-switch-prev').click(function () {
		controller.switchPrevious({
			includeDisabled: $('#chk-include-disabled').prop('checked'),
			includeHidden: $('#chk-include-hidden').prop('checked'),
			loop: $('#chk-loop').prop('checked')
		});
	});

	$('#btn-switch-next').click(function () {
		controller.switchNext({
			includeDisabled: $('#chk-include-disabled').prop('checked'),
			includeHidden: $('#chk-include-hidden').prop('checked'),
			loop: $('#chk-loop').prop('checked')
		});
	});

	$('#btn-switch-first').click(function () {
		controller.switchFirst({
			includeDisabled: $('#chk-include-disabled').prop('checked'),
			includeHidden: $('#chk-include-hidden').prop('checked'),
			loop: $('#chk-loop').prop('checked')
		});
	});

	$('#btn-switch-last').click(function () {
		controller.switchLast({
			includeDisabled: $('#chk-include-disabled').val(),
			includeHidden: $('#chk-include-hidden').val(),
			loop: $('#chk-loop').prop('checked')
		});
	});

	$('#btn-enable').click(function () {
		var target = $('#txt-enable-disable').val();
		controller.setEnabled(target);
	});

	$('#btn-disable').click(function () {
		var target = $('#txt-enable-disable').val();
		controller.setDisabled(target);
	});


	$('#btn-visible').click(function () {
		var target = $('#txt-visible-hidden').val();
		controller.setVisible(target);
	});

	$('#btn-hidden').click(function () {
		var target = $('#txt-visible-hidden').val();
		controller.setHidden(target);
	});

	$('#btn-remove').click(function () {
		var pos = $('#txt-remove').val().split(',');
		controller.remove.apply(null, pos);
	});

	$('#btn-add-tab-item').click(function () {
		var title = $('#txt-add-tab-item-title').val();
		var content = $('#txt-add-tab-item-content').val();
		var name = $('#txt-add-tab-item-name').val();
		var disabled = $('#chk-add-tab-item-disabled').prop('checked');
		var hidden = $('#chk-add-tab-item-hidden').prop('checked');

		controller.addTabItem({
			title: title,
			content: content,
			name: name,
			disabled: disabled,
			hidden: hidden
		});
	});

	$('#btn-insert-tab-item').click(function () {
		var pos = $('#txt-insert-tab-item-pos').val();

		var title = $('#txt-add-tab-item-title').val();
		var content = $('#txt-add-tab-item-content').val();
		var name = $('#txt-add-tab-item-name').val();
		var disabled = $('#chk-add-tab-item-disabled').prop('checked');
		var hidden = $('#chk-add-tab-item-hidden').prop('checked');

		controller.insertTabItem(pos, {
			title: title,
			content: content,
			name: name,
			disabled: disabled,
			hidden: hidden
		});
	});

	$('#btn-add').click(function () {
		var $region = $($('#txt-add').val());
		controller.add($region);
	});

	$('#btn-insert').click(function () {
		var pos = $('#txt-insert-pos').val();
		var $region = $($('#txt-add').val());
		controller.insert(pos, $region);
	});

	$('#btn-exchange').click(function () {
		var fromPos = $('#txt-exchange-from-pos').val();
		var toPos = $('#txt-exchange-to-pos').val();
		controller.exchangeTabItem(fromPos, toPos);
		updateCurrentIndex();
	});

	$('#btn-move-tab-item-before').click(function () {
		var fromPos = $('#txt-move-tab-item-from-pos').val();
		var toPos = $('#txt-move-tab-item-to-pos').val();
		controller.moveTabItemBefore(fromPos, toPos);
		updateCurrentIndex();
	});

	$('#btn-move-tab-item-after').click(function () {
		var fromPos = $('#txt-move-tab-item-from-pos').val();
		var toPos = $('#txt-move-tab-item-to-pos').val();
		controller.moveTabItemAfter(fromPos, toPos);
		updateCurrentIndex();
	});

	$('#btn-move-tab-item-first').click(function () {
		controller.moveTabItemFirst($('#txt-move-tab-item-pos').val());
		updateCurrentIndex();
	});

	$('#btn-move-tab-item-last').click(function () {
		controller.moveTabItemLast($('#txt-move-tab-item-pos').val());
		updateCurrentIndex();
	});

	$('#btn-move-tab-item-prev').click(function () {
		controller.moveTabItemPrevious($('#txt-move-tab-item-pos').val());
		updateCurrentIndex();
	});

	$('#btn-move-tab-item-next').click(function () {
		controller.moveTabItemNext($('#txt-move-tab-item-pos').val());
		updateCurrentIndex();
	});
</script>
</body>
</html>
